/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

function newEventForm(x, y, type, myLatlng) {
    var formpanel = new Ext.FormPanel({
        frame:true,
        items:[{
                  xtype : 'textfield',
                  //id : 'name',
                  fieldLabel: 'name',
                  anchor:'95%',
                  name: 'name'
               },{
                  xtype : 'textfield',
                  //id : 'type',
                  fieldLabel: 'type',
                  value: type,
                  readOnly: true,
                  anchor:'95%',
                  name: 'type'
               },{
                   //id : 'coordinateX',
                  xtype : 'textfield',
                  fieldLabel: 'coordinateX',
                  value : myLatlng.y,
                  readOnly: true,
                  anchor:'95%',
                  name: 'coordinateX'
               },{
                   //id : 'coordinateY',
                  xtype : 'textfield',
                  fieldLabel: 'coordinateY',
                  value : myLatlng.x,
                  readOnly: true,
                  anchor:'95%',
                  name: 'coordinateY'
               },{
                   ///id : 'eventdate',
                   xtype : 'datefield',
                   fieldLabel: 'event date',
                   format: 'Y-m-d',
                   anchor:'95%',
                   name: 'eventdate'
               },{
                   //id : 'eventtime',
                   xtype : 'timefield',
                   fieldLabel: 'event time',
                   format:'G:i',
                   anchor:'95%',
                   name: 'eventtime'
//               },{
//                   xtype : 'textfield',
//                  fieldLabel: 'color',
//                  anchor:'95%',
//                  name: 'color'
//               },{
//                   //id : 'trigger',
//                   xtype : 'trigger',
//                   fieldLabel: 'color',
//                   anchor:'95%',
//                   name: 'color',
//                   onTriggerClick : function(){
//                        if(this.disabled){
//                            return;
//                        }
//                        if (!this.chooser)
//                            this.chooser = new Ext.menu.ColorMenu({
//                                handler:function(cm,color){
//                                    if(typeof color=='string'){
//                                        Ext.Msg.alert('选择颜色','选择的颜色是'+color);
//                                    }
//                                }
//                            });
//                            //this.chooser.show();
//                            //this.chooser.show(null, this.setField.createDelegate(this));
//                        }
               },{
                   //id : 'description',
                   xtype : 'textarea',
                   fieldLabel: 'description',
                   anchor:'95%',
                   name: 'description'
               }],
            buttons: [{
                   text: 'OK',
                   handler: function(){
                       var name = document.getElementsByName("name")[0].value;
                       var type = document.getElementsByName("type")[0].value;
                       var coordinateX = document.getElementsByName("coordinateX")[0].value;
                       var coordinateY = document.getElementsByName("coordinateY")[0].value;
                       var eventdate = document.getElementsByName("eventdate")[0].value;
                       var eventtime = document.getElementsByName("eventtime")[0].value;
                       //var color = document.getElementsByName("color")[0].value;
                       var description = document.getElementsByName("description")[0].value;
                       var event = new Event('', name, type, coordinateX, coordinateY, eventdate, eventtime, description);
                       var eventInfo = new EventInfo('new', event);
                       plan.eventInfos.push(eventInfo);

                       addMarker(map, eventInfo, myLatlng);
                       formpanel.getForm().reset();
                       win.close();
                       //var name = form.getValues().name;
                       //saveEvent();
                   }
               },{
                    text: 'Cancel',
                    handler: function(){
                        win.close();
                    }
            }]
        });
        var win = new Ext.Window({
            width:390,
            height:340,
            plain:true,
            title:"Event",
            draggable:false,
            items:formpanel//,
            //buttons:[{text:"OK",handler:function(){win.close();}},{text:"Cancel",handler:function(){win.close();}}]
            });
        win.setPosition(x,y);
        win.show();
}



function showEventForm(x, y, eventInfo) {
    var event = eventInfo.event;
    var formpanel = new Ext.FormPanel({
        frame:true,
        items:[{
                  xtype : 'textfield',
                  fieldLabel: 'name',
                  anchor:'95%',
                  value: event.eventname,
                  name: 'name'
               },{
                  xtype : 'textfield',
                  fieldLabel: 'type',
                  anchor:'95%',
                  value: event.type,
                  name: 'type'
               },{
                  xtype : 'textfield',
                  fieldLabel: 'coordinateX',
                  readOnly: true,
                  anchor:'95%',
                  value: event.pointX,
                  name: 'coordinateX'
               },{
                  xtype : 'textfield',
                  fieldLabel: 'coordinateY',
                  readOnly: true,
                  anchor:'95%',
                  value: event.pointY,
                  name: 'coordinateY'
               },{
                   xtype : 'datefield',
                   fieldLabel: 'event date',
                   anchor:'95%',
                   format: 'Y-m-d',
                   value: event.eventdate,
                   name: 'eventdate'
               },{
                   xtype : 'timefield',
                   fieldLabel: 'event time',
                   anchor:'95%',
                   format: 'G:i',
                   value: event.eventtime,
                   name: 'eventtime'
               },{
                   xtype : 'textarea',
                   fieldLabel: 'description',
                   anchor:'95%',
                   value: event.eventdescript,
                   name: 'description'
               }],
            buttons: [{
                   text: 'Save',
                   handler: function(){
                       event.eventname = document.getElementsByName("name")[0].value;
                       event.type = document.getElementsByName("type")[0].value;
                       event.pointX = document.getElementsByName("coordinateX")[0].value;
                       event.pointY = document.getElementsByName("coordinateY")[0].value;
                       event.eventdate = document.getElementsByName("eventdate")[0].value;
                       event.eventtime = document.getElementsByName("eventtime")[0].value;
                       //var color = document.getElementsByName("color")[0].value;
                       event.eventdescript = document.getElementsByName("description")[0].value;
                       //
                       // original -> modified
                       // modified -> modified
                       // new -> new
                       // delete (impossible)
                       if(eventInfo.operation == "original") {
                           eventInfo.operation = "modified";
                       }

                       win.close();
                   }
               },{
                    text: 'Delete',
                    handler: function() {
                       Ext.Msg.confirm("Confirm","Are you sure you want to delete the event?", function(btn) {
                            if(btn == 'yes') {
                                deleteEvent(eventInfo);
                                win.close();
                            }
                        });
                    }
               },{
                    text: 'Cancel',
                    handler: function(){
                        win.close();
                    }
            }]
        });
        var win = new Ext.Window({
            width:390,
            height:340,
            plain:true,
            title:"Event",
            draggable:false,
            items:formpanel
        });
        win.setPosition(x,y);
        win.show();
}

function deleteEvent(eventInfo) {
    // original -> deleted
    // modified -> deleted
    // new -> remove from the array
    // delete (impossible)
    if(eventInfo.operation == "original"||eventInfo.operation == "modify") {
        eventInfo.operation = "delete";
    } else if(eventInfo.operation == "new") {
        eventInfo.operation = "no-use";
    }
    deleteMark();
    //displayEvents();
}